---
permalink: "/advanced/case-studies/tabs/index.xml"
tags: "Advanced/Case Studies"
hv_title: "Tabs"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}

{% block styles %}
  <style
    id="tab-bar-select"
    backgroundColor="#eee"
    borderRadius="12"
    flexDirection="row"
    justifyContent="space-between"
    marginBottom="24"
    marginHorizontal="24"
    padding="2"
  />
  <style
    id="tab"
    flex="1"
    height="48"
    alignItems="center"
    justifyContent="center"
    borderColor="red"
    borderWidth="1"
  >
    <modifier pressed="true">
    <style backgroundColor="pink" />
    </modifier>
    <modifier selected="true">
    <style backgroundColor="red" />
    </modifier>
  </style>
  <style id="tab-content" flex="1" />
  <style id="green" backgroundColor="lightgreen" />
  <style id="blue" backgroundColor="lightblue" />
  <style id="yellow" backgroundColor="lightyellow" />
  <style id="centered" alignItems="center" justifyContent="center" />
{% endblock %}

{% block container %}
  <select-single id="tabs" name="tabs" style="tab-bar-select">
    <option value="1" style="tab">
      <behavior trigger="deselect" action="hide" target="tab-1" />
      <behavior trigger="select" action="show" target="tab-1" />
      <text>Tab 1</text>
    </option>
    <option value="2" style="tab" selected="true">
      <behavior trigger="deselect" action="hide" target="tab-2" />
      <behavior trigger="select" action="show" target="tab-2" />
      <text>Tab 2</text>
    </option>
    <option value="3" style="tab">
      <behavior trigger="deselect" action="hide" target="tab-3" />
      <behavior trigger="select" action="show" target="tab-3" />
      <text>Tab 3</text>
    </option>
  </select-single>
  <view id="tab-1" style="tab-content green centered" hide="true">
    <view
      trigger="visible"
      action="dispatch-event"
      event-name="tab-1-visible"
    />
    <text>TAB 1 CONTENT</text>
  </view>
  <view id="tab-2" style="tab-content blue centered">
    <view
      trigger="visible"
      action="dispatch-event"
      event-name="tab-2-visible"
    />
    <text>TAB 2 CONTENT</text>
  </view>
  <view id="tab-3" style="tab-content yellow centered" hide="true">
    <view
      trigger="visible"
      action="dispatch-event"
      event-name="tab-3-visible"
    />
    <text>TAB 3 CONTENT</text>
  </view>
{% endblock %}
